<template>
	<!-- 组件的结构 -->
	<div>
		<h1>v-text指令</h1>
		<div>消息：{{msg}}</div>
		<div v-text="msg"/>
		<hr>

		<h1>v-html指令</h1>
		<div v-html="msg2"/>
		<div v-html="msg3"/>
		<hr>

		<h1>v-once指令</h1>
		<h2 v-once>n的初始值是：{{n}}</h2>
		<h2>当前n的值是：{{n}}</h2>
		<button @click="n+=1">点我n+1</button>
		<hr>

		<h1>v-pre指令</h1>
		<div v-pre>
			<h1>你好,{{msg}}</h1>
			<h1>欢迎啊</h1>
			<h1>Vue不咋难</h1>
			<div>
				<span>
					Hello
					<p>我要努力学习</p>
				</span>
			</div>
		</div>
		
	</div>
</template>

<script>

	//定义并暴露一个组件的配置
	export default {
		name:'App',
		data() {
			return {
				msg:'你好啊！',
				msg2:'<h1>你好啊！</h1>',
				msg3:`<a href="javascript:console.log(document.cookie)">兄弟这有好东西</a>`,
				n:1
			}
		}
	}
</script>

<style scoped>
	div{
		font-size: 18px;
	}
</style>
